<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*
         * Demo1:选取一张图片，并预览
         */
        .preview_box img {
            width: 200px;
        }
    </style>
</head>
<body>
    <h3>Demo1:选取一张图片，并预览</h3>
    <input id="img_input" type="file" accept="image/*"/>
    <label for="img_input"></label>
    <div class="preview_box"></div>

    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script>
        /*
         * Demo1:选取一张图片，并预览
         */
        $("#img_input").on("change", function(e) {
            var file = e.target.files[0]; //获取图片资源
            // 只选择图片文件
            if (!file.type.match('image.*')) {
                return false;
            }
            var reader = new FileReader();
            reader.readAsDataURL(file); // 读取文件
            // 渲染文件
            reader.onload = function(arg) {
                var img = '<img class="preview" src="' + arg.target.result + '" alt="preview"/>';
                $(".preview_box").empty().append(img);
            }
        });
    </script>
</body>
</html>